<template>
  <div class="final" v-show="this.isShow.isFNShow">
    <div class="fire">
      <div class="fireworks-container fireworksMoving fireworksMoving1">
        <div class="fireworks fireworksShine fireworksShine1"></div>
      </div>
      <div class="fireworks-container2 fireworksMoving fireworksMoving2">
        <div class="fireworks2 fireworksShine fireworksShine2"></div>
      </div>
      <div class="fireworks-container3 fireworksMoving fireworksMoving3">
        <div class="fireworks3 fireworksShine fireworksShine3"></div>
      </div>
    </div>

    <div class="title"></div>
    <div class="ribbon">
      <div class="inner-ribbon" :class="`title${titleNum}`"></div>
    </div>
    <div class="scoreboard">
      <div class="sb-main">
        <div class="score">
          <span>{{ this.userData.nickname || 'jack' }}</span>的战绩
        </div>
        <div class="scoreNum">{{ this.userData.successnum || 0 }}</div>
        <div class="beatDown">{{ beatDown || 0 }}</div>
        <div class="wContainer">
          <div class="left" :class="`para${paraNum}`"></div>
          <div class="right"></div>
        </div>
        <div class="logo"></div>
      </div>
      <div class="saveTip save-shine"></div>
    </div>
    <div class="btn" @click="playAgain"></div>
    <div class="merge">
      <img src="./final_save.jpg" alt="" ref="bg">
      <img src="./final_title1.png" alt="" ref="t1">
      <img src="./final_title2.png" alt="" ref="t2">
      <img src="./final_title3.png" alt="" ref="t3">
      <img src="./final_para1.png" alt="" ref="p1">
      <img src="./final_para2.png" alt="" ref="p2">
      <img src="./final_para3.png" alt="" ref="p3">
      <img src="./final_para4.png" alt="" ref="p4">
      <img src="./final_para5.png" alt="" ref="p5">
      <img src="./final_para6.png" alt="" ref="p6">
      <img src="./final_para7.png" alt="" ref="p7">
      <img src="./final_para8.png" alt="" ref="p8">
      <img src="./final_qr-temp.png" alt="" ref="qr">
      <canvas ref="myCanvas"></canvas>
    </div>
    <img src="" alt="" ref="rendered" id="renderedImg">
  </div>
</template>

<script>
import { titleData, calRatio } from './title.js'

export default {
  name: 'pageFinal',
  props: {
    isShow: {
      type: Object
    },
    userData: {
      type: Object
    },
    isSubMerge:{
      type: Boolean
    }
  },
  data () {
    return {
      titleNum: 1,
      paraNum: 1,
      beatDown: 0
    }
  },
  mounted () {
    const tNum = Math.ceil(Math.random() * 3)
    const pNum = Math.ceil(Math.random() * 8)
    this.titleNum = tNum
    this.paraNum = pNum
  },
  watch:{
    isSubMerge:function() {
      const _this = this
      if (this.isSubMerge) {
        setTimeout(() => {
          _this.merge()
        }, 400)
      }
    }
  },
  methods: {
    nextToOrigin () {
      this.$emit('toOrigin')
    },
    playAgain () {
      window.location.href = 'https://www.jiandoukeji.com/h5/2018/youku/fbgame/index.html?v=' + Math.ceil(Math.random() * 10000)
      // this.merge()
      console.log(this.userData)
    },
    isType (str) {
      const cc = str.charCodeAt()
      let result = 'hNum' // 汉字
      if (cc >= 97 && cc <= 122) {
        result = 'aNum' // 小写字母
      } else if (cc >= 65 && cc <= 90) {
        result = 'ANum' // 大写字母
      }
      return result
    },
    calculate (str) {
      const arr = str.split('')
      let aNum = 0
      let ANum = 0
      for (const i of arr) {
        const cc = i.charCodeAt()
        if (cc >= 97 && cc <= 122) {
          aNum += 1
        } else if (cc >= 65 && cc <= 90) {
          ANum += 1
        }
      }
      return {
        aNum,
        ANum
      }
    },
    merge () {
      const genTitle = titleData[this.titleNum]
      const genName = this.userData.nickname
      const genScore = this.userData.successnum || 0
      shareTitle = `${genName}在1分钟内踢进去${genScore}个点球，获得了${genTitle}`
      sharethis()

      const scoreNum = this.userData.successnum
      const scoreRatio = calRatio(scoreNum)
      this.beatDown = scoreRatio
      const name = this.userData.nickname + "的战绩"
      // const name = "James的战绩"
      const nameArr = name.split('')
      const len = nameArr.length
      const objLen = this.calculate(name)
      const AaCompensate = objLen.aNum * 8 + objLen.ANum * 5
      const wCompensate = (8 - len) * 22 // 字数补偿

      const canvas = this.$refs.myCanvas
      const ctx = canvas.getContext('2d')
      const rendered = this.$refs.rendered
      const myImgQR = this.$refs.qr
      const myImg = this.$refs.bg
      const myImgT = this.$refs[`t${this.titleNum}`]
      const myImgP = this.$refs[`p${this.paraNum}`]
      canvas.width = 750
      canvas.height = 1334
      ctx.drawImage(myImg, 0, 0, 750, 1334)
      ctx.drawImage(myImgT, 104, 255, 540, 64)
      ctx.drawImage(myImgP, 130, 820, 262, 143)
      ctx.drawImage(myImgQR, 446, 820, 150, 150)
      ctx.font = '70px fontKu'
      ctx.fillStyle = '#ff466d'
      ctx.fillText(scoreNum, 192, 730)
      ctx.fillText(scoreRatio, 440, 730)

      ctx.font = '40px fontKu'
      ctx.fillStyle = '#fff'
      let startX = 212 + wCompensate + AaCompensate
      const _this = this
      nameArr.forEach(function (ele, i) {
        let distance = 0
        let index = i + 1
        const type = _this.isType(ele)
        if (type === 'hNum') {
          ctx.font = '40px fontKu'
          ctx.fillStyle = '#fff'
          ctx.fillText(ele, startX, 490)
          distance = 1.2 + 40 // letter-spacing 和 字体位移
          startX += distance
        } else if (type === 'aNum') {
          ctx.font = '40px fontKu'
          ctx.fillStyle = '#fff'
          ctx.fillText(ele, startX, 490)
          distance = 1.4 + 26 // letter-spacing 和 字体位移
          startX += distance
        } else if (type === 'ANum') {
          ctx.font = '40px fontKu'
          ctx.fillStyle = '#fff'
          ctx.fillText(ele, startX, 490)
          distance = 1.6 + 30
          startX += distance
        }
      })
      // ctx.fillText(name, 226 + distance + plusDistance, 490)
      let imgData = canvas.toDataURL('image/png', 0.4)
      rendered.src = imgData
    }
  }
}
</script>

<style lang="less" scoped>
@import './page.less';
@import '../../assets/reset.less';
.final {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('./final_bg.jpg');
  background-size: 100% 100%;
  .fireworks-container {
    position: absolute;
    top: 8rem;
    left: 10%;
    width: 17.1875rem /* 275/16 */;
    height: 18.75rem /* 300/16 */;
    .fireworks {
      width: 17.1875rem /* 275/16 */;
      height: 18.75rem /* 300/16 */;
      transform-origin: center;
      background-image: url('./final_fireworks1.png');
      background-size: 100% 100%;
    }
  }
  .fireworks-container2 {
    position: absolute;
    top: 10rem;
    left: 40%;
    width: 17.1875rem /* 275/16 */;
    height: 18.75rem /* 300/16 */;
    .fireworks2 {
      width: 17.1875rem /* 275/16 */;
      height: 18.75rem /* 300/16 */;
      transform-origin: center;
      background-image: url('./final_fireworks2.png');
      background-size: 100% 100%;
    }
  }
  .fireworks-container3 {
    position: absolute;
    top: 6rem;
    left: 0;
    width: 17.1875rem /* 275/16 */;
    height: 17.8125rem /* 285/16 */;
    .fireworks3 {
      width: 17.1875rem /* 275/16 */;
      height: 17.8125rem /* 285/16 */;
      transform-origin: center;
      background-image: url('./final_fireworks3.png');
      background-size: 100% 100%;
    }
  }
  .title {
    position: absolute;
    top: 2vh;
    left: 50%;
    transform: translateX(-6.015625rem /* 96.25/16 */);
    width: 12.03125rem /* 192.5/16 */;
    height: 2.75rem /* 44/16 */;
    background-image: url('./final_title.png');
    background-size: 100% 100%;
  }
  .ribbon {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 12vh;
    width: 100%;
    height: 4.28125rem /* 68.5/16 */;
    background-image: url('./final_ribbon.png');
    background-size: 100% 100%;
    .inner-ribbon {
      width: 16.875rem /* 270/16 */;
      height: 2rem /* 32/16 */;
      margin-top: .6rem;
      background-size: 100% 100%;
    }
  }
  .scoreboard {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    top: 24vh;
    left: 50%;
    transform: translateX(-10.21875rem /* 163.5/16 */);
    width: 20.4375rem /* 327/16 */;
    height: 22.4375rem /* 343/16 */;
    .sb-main {
      position: relative;
      width: 100%;
      height: 21.4375rem /* 343/16 */;
      background-image: url('./final_board.png');
      background-size: 100% 100%;
      .score {
        position: absolute;
        left: 50%;
        top: 0;
        margin-top: 1rem;
        transform: translateX(-5.9rem);
        width: 12rem /* 160/16 */;
        height: 1.75rem /* 28/16 */;
        text-align: center;
        letter-spacing: .16rem;
        font-family: 'fontKu';
        font-size: 1.25rem;
        color: #eee;
        // span {
        //   color: rgb(255, 210, 0);
        // }
      }
      .scoreNum, .beatDown {
        text-align: center;
        line-height: 2.8125rem /* 45/16 */;
        top: 7.4rem;
        width: 5.625rem /* 90/16 */;
        height: 2.8125rem /* 45/16 */;
        color: rgb(255, 70, 109);
        font-family: 'fontKu';
        font-size: 1.8rem;
        font-weight: 700;
      }
      .scoreNum {
        position: absolute;
        left: 3.2rem /* 44/16 */;
      }
      .beatDown {
        position: absolute;
        right: 3.2rem;
      }
      .wContainer {
        position: absolute;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        left: 50%;
        bottom: 0;
        padding: 1rem;
        margin-bottom: 3.2rem;
        transform: translateX(-8.4375rem /* 135/16 */);
        width: 16.875rem /* 270/16 */;
        height: 6.5625rem /* 105/16 */;
        .left {
          height: 4.53125rem /* 72.5/16 */;
          width: 9.2rem;
          background-size: auto 100%;
          background-repeat: no-repeat;
        }
        .right {
          width: 4.6875rem /* 75/16 */;
          height: 4.6875rem /* 75/16 */;
          background-image: url('./final_qr-temp.png');
          background-size: 100% 100%;
        }
      }
      .logo {
        position: absolute;
        margin-bottom: 1.4rem;
        left: 50%;
        bottom: 0;
        transform: translateX(-4.15625rem /* 66.5/16 */);
        width: 8.3125rem /* 133/16 */;
        height: 1.3125rem /* 21/16 */;
        background-image: url('./final_logo.png');
        background-size: 100% 100%;
      }
    }
    .saveTip {
      width: 19.03125rem /* 304.5/16 */;
      height: 1.25rem /* 20/16 */;
      background-image: url('./final_save.png');
      background-size: 100% 100%;
    }
  }
  .btn {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-4.75rem /* 76/16 */);
    width: 9.5rem /* 152/16 */;
    height: 3.5625rem /* 57/16 */;
    background-image: url('./final_btn.png');
    background-size: 100% 100%;
  }
  .merge {
    display: none;
  }
  #renderedImg {
    opacity: 0;
    width: 100%;
    height: 80%;
  }
}

.save-shine {
  animation: shine 2.5s ease-in infinite;
}

@keyframes shine {
  0%, 20%, 80%, 100% {
    filter: opacity(1);
  }
  50% {
    filter: opacity(0);
  }
}

.fireworksShine {
  animation: fireworksScale 1.5s ease-in infinite;
}

.fireworksShine1 {
  animation-delay: .5s;
}

.fireworksShine2 {
  animation-delay: 1s;
}

.fireworksShine3 {
  animation-delay: 1.2s;
}

.fireworksMoving {
  animation: fireworksMove 1.5s linear infinite;
}

.fireworksMoving1 {
  animation-delay: .5s;
}

.fireworksMoving2 {
  animation-delay: 1s;
}

.fireworksMoving3 {
  animation-delay: 1.2s;
}

@keyframes fireworksMove {
  0% {
    transform: translateY(0);
  }
  80%, 100% {
    transform: translateY(-8rem);
  }
}

@keyframes fireworksScale {
  0% {
    transform: scale3d(0, 0, 0);
  }
  80%, 100% {
    transform: scale3d(.6, .6, 1);
  }
}
</style>
